import { createSlice } from '@reduxjs/toolkit';

// 默认头像
const DEFAULT_AVATAR = 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png';

// 写死的默认数据
const defaultQuestions = [
  {
    id: 1,
    title: 'React Hooks 的使用场景是什么？',
    content: '我在学习 React Hooks 时遇到一些困惑，希望能详细了解它的适用场景和最佳实践。',
    author: {
      name: '张三',
      avatar: DEFAULT_AVATAR,
      isTeacher: false
    },
    tags: ['React', 'Hooks', '前端开发'],
    createTime: '2024-03-15 10:30',
    viewCount: 156,
    likeCount: 23,
    answerCount: 5,
    isHot: true,
    answers: [
      {
        id: 1,
        content: 'React Hooks 主要用于在函数组件中使用状态和其他 React 特性。常见的使用场景包括：\n1. useState: 管理组件状态\n2. useEffect: 处理副作用\n3. useContext: 跨组件共享数据\n4. useCallback: 优化性能\n5. useMemo: 缓存计算结果',
        author: {
          name: '李老师',
          avatar: DEFAULT_AVATAR,
          isTeacher: true
        },
        createTime: '2024-03-15 11:00',
        likeCount: 45,
        isAccepted: true,
        isRewarded: true
      }
    ]
  },
  {
    id: 2,
    title: '如何优化React应用性能？',
    content: '我的React应用在数据量大的时候性能表现不佳，希望了解一些优化方案。',
    author: {
      name: '李四',
      avatar: DEFAULT_AVATAR,
      isTeacher: false
    },
    tags: ['React', '性能优化', '前端开发'],
    createTime: '2024-03-14 15:20',
    viewCount: 89,
    likeCount: 12,
    answerCount: 3,
    isHot: false,
    answers: [
      {
        id: 2,
        content: '以下是一些常用的 React 性能优化方法：\n1. 使用 React.memo 避免不必要的重渲染\n2. 使用 useMemo 缓存计算结果\n3. 使用 useCallback 缓存回调函数\n4. 合理使用 key 属性\n5. 使用虚拟列表处理大量数据',
        author: {
          name: '王老师',
          avatar: DEFAULT_AVATAR,
          isTeacher: true
        },
        createTime: '2024-03-14 16:00',
        likeCount: 18,
        isAccepted: true,
        isRewarded: false
      }
    ]
  },
  {
    id: 3,
    title: 'Vue3 和 React 的对比分析',
    content: '想了解 Vue3 和 React 在开发体验、性能、生态等方面的优劣势对比。',
    author: {
      name: '小明',
      avatar: DEFAULT_AVATAR,
      isTeacher: false
    },
    tags: ['Vue', 'React', '前端开发'],
    createTime: '2024-03-13 09:15',
    viewCount: 234,
    likeCount: 56,
    answerCount: 8,
    isHot: true,
    answers: [
      {
        id: 3,
        content: 'Vue3 和 React 各有特点：\n1. Vue3 的 Composition API 和 React Hooks 设计理念类似\n2. Vue3 提供更多开箱即用的功能\n3. React 生态更加丰富\n4. Vue3 的响应式系统更加直观\n5. React 的 JSX 更加灵活',
        author: {
          name: '张老师',
          avatar: DEFAULT_AVATAR,
          isTeacher: true
        },
        createTime: '2024-03-13 10:00',
        likeCount: 67,
        isAccepted: true,
        isRewarded: true
      }
    ]
  }
];

const qaSlice = createSlice({
  name: 'qa',
  initialState: {
    questions: defaultQuestions,
    loading: false,
    error: null,
    filters: {
      tag: 'all',
      sort: 'latest'
    }
  },
  reducers: {
    setQuestions: (state, action) => {
      state.questions = action.payload;
    },
    addQuestion: (state, action) => {
      state.questions.unshift(action.payload);
    },
    addAnswer: (state, action) => {
      const { questionId, answer } = action.payload;
      const question = state.questions.find(q => q.id === questionId);
      if (question) {
        question.answers.push(answer);
        question.answerCount += 1;
      }
    },
    updateQuestion: (state, action) => {
      const { questionId, updates } = action.payload;
      const question = state.questions.find(q => q.id === questionId);
      if (question) {
        Object.assign(question, updates);
      }
    },
    updateAnswer: (state, action) => {
      const { questionId, answerId, updates } = action.payload;
      const question = state.questions.find(q => q.id === questionId);
      if (question) {
        const answer = question.answers.find(a => a.id === answerId);
        if (answer) {
          Object.assign(answer, updates);
        }
      }
    },
    setFilters: (state, action) => {
      state.filters = { ...state.filters, ...action.payload };
    },
    setLoading: (state, action) => {
      state.loading = action.payload;
    },
    setError: (state, action) => {
      state.error = action.payload;
    }
  }
});

export const {
  setQuestions,
  addQuestion,
  addAnswer,
  updateQuestion,
  updateAnswer,
  setFilters,
  setLoading,
  setError
} = qaSlice.actions;

export default qaSlice.reducer; 